<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .wrap {
            width: 1140px;
            margin: 0 auto;
        }

        .wrap .searchBar {
            margin-bottom: 20px;
            display: flex;
            height: 40px;
        }

        .wrap .searchCon {
            flex: 1;
            outline: none;
            text-indent: 10px;
        }

        .wrap .searchBtn {
            width: 60px;
            background-color: grey;
            text-align: center;
            line-height: 40px;
            border-radius: 4px;
        }

        .goodList li {
            width: 23%;
            min-height: 267px;
            padding: 0 10px;
            box-sizing: border-box;
            float: left;
            border: 1px solid #000;
            margin-bottom: 20px;
        }

        .goodList li h4 {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .goodList li:not(:nth-child(4n)) {
            margin-right: 2%;
        }

        .goodList li img {
            width: 90%;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <div class="wrap">
        <div class="searchBar">
            <input type="text" class="searchCon">
            <a href="javascript:;" class="searchBtn">搜索</a>
        </div>
        <ul class="goodList">
            <!-- <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg"
                        alt="">
                    <h3>华为 HUAWEI P40 Pro</h3>
                    <p>4999.00</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg"
                        alt="">
                    <h3>华为 HUAWEI P40 Pro</h3>
                    <p>4999.00</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg"
                        alt="">
                    <h3>华为 HUAWEI P40 Pro</h3>
                    <p>4999.00</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg"
                        alt="">
                    <h3>华为 HUAWEI P40 Pro</h3>
                    <p>4999.00</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg"
                        alt="">
                    <h3>华为 HUAWEI P40 Pro</h3>
                    <p>4999.00</p>
                </a>
            </li> -->

        </ul>
    </div>
</body>
<script>
    var ul = document.querySelector(".goodList");
    var searchCon = document.querySelector(".searchCon");
    var searchBtn = document.querySelector(".searchBtn");

    // https://floor.jd.com/user-v20/feed/get?page=1&pagesize=25&area=17_2980_0_0&source=pc-home&callback=jsonpMore2Goods&_=1617178788120

    // page  第几页
    // pagesize  每页显示多少条
    // callback  回调函数名
    // &_=1617178788107   时间戳 

    // data
    // t  商品名称
    // jp 商品价格 (当前)
    // op 商品价格 (原价)
    // img  商品图片  需要拼接前缀  https://img11.360buyimg.com/seckillcms/s400x400_
    // target_url  商品地址

    function fn(result) {
        console.log(result);
        var { data } = result;
        var html = "";
        data.forEach(({ t, jp, op, img, target_url }) => {
            html += `<li>
                <a href="${target_url}">
                    <img src="https://img11.360buyimg.com/seckillcms/s200x200_${img}"
                        alt="">
                    <h4>${t}</h4>
                    <p>原价:${op}</p>
                    <p>现价:${jp}</p>
                </a>
            </li>`
        })
        ul.innerHTML = html;
    }






</script>
<!-- 返回函数的调用 -->
<script
    src="https://floor.jd.com/user-v20/feed/get?page=1&pagesize=100&area=17_2980_0_0&source=pc-home&callback=fn&_=1617178788107"></script>

</html>